<template>
  <div class="inner-container">
    <div class="section-title">基本信息</div>
    <!-- --------------------------------------------------新增表单-------------------------------------------------------- -->
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户状态" prop="status">
            <el-select v-model="formData.status">
              <el-option  v-for="item in customerStatusArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <span style="color:red">由系统根据不同的条件进行判定</span>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户类型" prop="type">
            <el-select v-model="formData.type">
              <el-option  v-for="item in customerTypeArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入客户名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio value="1">男</el-radio>
              <el-radio value="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age" placeholder="请输入客户年龄"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="formData.idNumber" placeholder="请输入身份证号"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-input v-model="formData.emergencyPhone" placeholder="请输入紧急电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input v-model="formData.emergencyContact" placeholder="请输入紧急联系人"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-input v-model="formData.propertyName" placeholder="请输入楼盘名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户型" prop="houseType">
            <el-select v-model="formData.houseType">
              <el-option  v-for="item in customerHouseTypeArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="面积" prop="houseSize">
            <el-input v-model="formData.houseSize" placeholder="请输入面积"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-row>
            <el-col :md="12" :sm="16">
              <el-form-item label="楼盘地址" prop="province">
                <el-select v-model="formData.province" @change="loadCity">
                  <el-option v-for="item in provinceArr " :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="4">
              <el-form-item prop="city" label-width="5">
                <el-select v-model="formData.city" @change="loadDistrict">
                  <el-option v-for="item in CityArr " :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="6" :sm="4">
              <el-form-item prop="district" label-width="5">
                <el-select v-model="formData.district">
                  <el-option v-for="item in districtArr "  :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="12">
          <el-form-item prop="propertyAddr" label-width="0">
            <el-input v-model="formData.propertyAddr" placeholder="详细地址"/>
          </el-form-item>
        </el-col>
      </el-row>

    <br>
    <div class="section-title">客情跟踪</div>
      <el-row :gutter="30">
        <el-col :span="6" >
          <el-form-item label="客户来源" prop="source">
            <el-select v-model="formData.source">
              <el-option  v-for="item in customerSourceArr" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item prop="propertyAddr" label-width="0">
            <el-input v-model="formData.customerDescribe" placeholder="详细信息"/>
          </el-form-item>
        </el-col>

        <el-col :span="6" >
          <el-form-item label="预约时间"  >
            <el-date-picker type="date" format="YYYY-MM-DD"  value-format="YYYY-MM-DD" v-model="formData.reserveTime" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">

        <el-col :span="8">
          <el-form-item label="设计部门" prop="depId" >
            <el-select v-model="formData.depId" @change="getDesigner" >
              <el-option v-for="item in deptArr" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设计师" prop="empName">
            <el-select v-model="formData.designer" >
              <el-option v-for="item in getDesignerArr " :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item  label="跟单人"  >
            <el-input v-model="formData.merchandiser" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="跟单结果">
            <el-radio-group v-model="formData.followResult">
              <el-radio value="10">待跟单</el-radio>
              <el-radio value="20">已订单（财务待收款）</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="客情描述">
            <el-input v-model="formData.sourceRemark" placeholder="客情描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="附件">
            <!-- handleRemove移除图片方法   handlePictureCardPreview 预览图片          -->
            <el-upload
                ref="file"
                v-model:file-list="fileList"
                v-model:action="imgUrl"
                name="file"
                :limit="4"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

    <br>
    <div class="section-title">量房信息</div>
      <el-row :gutter="30" >
        <el-col :span="10">
          <el-form-item label="是否可量房">
            <el-select v-model="formData.isQuantityHouse">
              <el-option value="10" label="可量房"></el-option>
              <el-option value="20" label="不可量房"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6" >
          <el-form-item label="预约量房时间"  >
            <el-date-picker type="date" format="YYYY-MM-DD"  value-format="YYYY-MM-DD" v-model="formData.appointmentTime" />
          </el-form-item>
        </el-col>

        <el-col :span="6" >
          <el-form-item label="实际量房时间"  >
            <el-date-picker type="date" format="YYYY-MM-DD"  value-format="YYYY-MM-DD" v-model="formData.physicalTime" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="量房结果">
            <el-radio-group v-model="formData.quantityHouseStatus" >
              <el-radio value="10" >已量房</el-radio>
              <el-radio value="20">待量房</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="量房人">
            <el-input v-model="formData.quantityHouseName" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :span="10">
          <el-form-item label="量房描述">
            <el-input v-model="formData.remark" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <el-form-item  >
        <el-button type="primary" @click="saveCustomer">保存</el-button>
        <el-button @click="$router.push('/crm/customer')">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {createRouter as $router, useRouter} from "vue-router"
import request from '@/utils/request';

const router = useRouter()
const formRef = ref()
//--------------------------------------------定义表单属性      --------------------------------//

//定义用于保存部门数组
const  deptArr = ref([])
const loadLeader = ()=>{
  request.get(BASE_URL+'/api/crm/personnel/dept/select?level=40').then(res=>{
    //console.log(res.data.list)
    deptArr.value = res.data.list
  })
}
//定义用于保存设计师数组
const getDesignerArr =  ref([])
const  getDesigner = (deptId)=>{
  request.get('/api/crm/user/select?deptId='+deptId).then(res => {
  getDesignerArr.value = res.data
    //console.log(getDesignerArr.value)
  })
}

let uname = localStorage.getItem('uname')
const formData = ref({
  status: '10',
  type: '10',
  name: undefined,
  gender: '1',
  age: undefined,
  contactPhone: undefined,
  idNumber: undefined,
  emergencyPhone: undefined,
  emergencyContact: undefined,
  propertyName: undefined,
  houseType: '10',
  houseSize: '',
  province: '',
  city: '',
  district: '',
  propertyAddr: undefined,
  source: undefined,
  customerDescribe:'',
  designer:'',
  depId:'',
  manager:uname,
  merchandiser:uname,
  followResult:'10',
  reserveTime:'',
  sourceRemark:'',
  isQuantityHouse:'10',
  appointmentTime:'',
  physicalTime:'',
  quantityHouseName:'',
  quantityHouseStatus:'20',
  remark:'',
})
//--------------------------------------------定义输入框提示--------------------------------//
const formRules = ref({
  type: [{required: true, message: '客户类型为必选项'}],
  name: [{required: true, message: '客户名称为必填项'}],
  contactPhone: [{required: true, message: '联系电话为必填项'}],
  propertyName: [{required: true, message: '楼盘名称为必填项'}],
  houseType: [{required: true, message: '户型为必选项'}],
  houseSize: [{required: true, message: '面积为必填项'}],
  province: [{required: true, message: '省份为必选项'}],
  city: [{required: true, message: '城市为必选项'}],
  propertyAddr: [{required: true, message: '详细地址为必填项'}],
  source: [{required: true, message: '客户来源为必填项'}],
  idNumber: [{required: true, message: '身份证号为必填项'}]
})
const fileList = ref();
const  file =ref()
const saveCustomer = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    file.value.submit();
    request.post('/api/crm/customer/add',formData.value).then(res=>{
      ElMessage.success('新增成功')
      console.log(formData.value)
      router.push('/crm/customer')
    })

  })
}


//定义数组用来保存车辆类型字典项
const customerStatusArr = ref([]);
const customerTypeArr = ref([]);
const customerSourceArr = ref([]);
const customerHouseTypeArr = ref([]);
onMounted(()=>{
  loadProvince()
  loadLeader()
  loadDictOptions(customerTypeArr,'customer_type');
  loadDictOptions(customerStatusArr,'customer_status');
  loadDictOptions(customerSourceArr,'customer_source');
  loadDictOptions(customerHouseTypeArr,'house_type');
})



//定义区县数组
const districtArr = ref([]);
//加载区县
const loadDistrict = (parentId)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId='+parentId).then(res=>{
    districtArr.value = res.data

  })
}

//定义城市数组
const CityArr = ref([]);
//加载城市
const loadCity = (parentId)=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId='+parentId).then(res=>{
    CityArr.value = res.data
    //console.log(CityArr.value)

  })
}
//加载省份
//定义省份数组
const provinceArr = ref([]);
const loadProvince = ()=>{
  request.get(BASE_URL+'/api/crm/customer/selectDistrict?parentId=0').then(res=>{
    provinceArr.value = res.data


  })
}

/**图片上传相关代码开始**/
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const imgUrl = ref(BASE_URL+'/api/file/upload');
//console.log(imgUrl.value)
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  // console.log(uploadFile, uploadFiles);
  let imgUrl = uploadFile.response.data;
  request.post(BASE_URL+'/api/file/remove?imgUrl='+imgUrl).then(res=>{
    ElMessage.success('删除成功')
  })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true;
  /*console.log(uploadFile.url);*/
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/

</script>

<style scoped>
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 35px;
  line-height: 1rem;
  border-left: 3px solid #409EFF;
}

.section-title::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
}
</style>
